import React , { Component } from "react";

// import Base from "./Base"
export default class GG extends Component{
  constructor (props){
    super(props)
    this.state= {
     isShow:[]
    }
 }
  baseinfo(){
    return [
      {name:"正码1",key:"ZM1"},
      {name:"正码2",key:"ZM2"},
      {name:"正码3",key:"ZM3"},
      {name:"正码4",key:"ZM4"},
      {name:"正码5",key:"ZM5"},
      {name:"正码6",key:"ZM6"}
    ]
  }
 show(index){
  const { isShow} = this.state
  var num = isShow.indexOf(index)
  num< 0 ? isShow.push(index) : isShow.splice(num,1)
  this.setState({
    isShow
  })
 }
 // 可以在这判断是不是单选 给order添加第二个参数key
 order(item,key){
  this.props.order(item,key)
 }
  render(){
    const {content,select} = this.props;
    let baseinfo = this.baseinfo()
    let page = content.length / baseinfo.length
     return  <div className="panl">
{          this.baseinfo().map((item,index)=>{
    let selectItem = select[item.key]
            return  <div className="panel" key={index}>
            <div className="panel_head">
              <div className="icon" onClick={()=>{
                this.show(index)
              }}>
                 <i className={this.state.isShow.indexOf(index)>-1 ? "iconfont icon-xiala shang" : "iconfont icon-xiala"}></i>
              </div>
              {item.name}
            </div>
            <div className={this.state.isShow.indexOf(index)>-1 ? "panel_body ZM hidden" : "panel_body  ZM"}>
             {/* <Base {...this.props} content={content.slice(index*page,(index+1)*page)} order={(value)=>this.order(value,item.key)} ></Base> */}
              <div className="peilv">
              <div className="wenzi">
              {
                content.slice(index*page,(index+1)*page).map((ele,i)=>{
                  return <li key={i} onClick={()=>{
                        this.order(ele,item.key)
                  }}
                  className={ selectItem && selectItem.id == ele.id ? "selected" : ""}
                  >
                {isNaN(ele.number*1) ? <span className={"noball "+ele.id}>{ele.number}</span> :
                  <HKBall num={ele.number*1}></HKBall>}
                  <p className="red">{ele.pl}</p></li>
                })
              }
              </div>
            </div>

            </div>
          </div>
          })
}
      </div>
 

  }
}